<template>
  <div>
    <el-dialog :visible="showQuestionsView" title="题目预览" @close="closeFn">
      <div class="borderStyle">
        <el-row>
          <el-col :span="6">
            <p>
              【题型】：{{ questionItem.questionType | questionType2Filter }}
            </p>
          </el-col>
          <el-col :span="6">
            <p>【编号】：{{ questionItem.id }}</p>
          </el-col>
          <el-col :span="6">
            <p>【难度】：{{ questionItem.difficulty | difficultyFilter }}</p>
          </el-col>
          <el-col :span="6">
            <p>【标签】：{{ questionItem.tags }}</p>
          </el-col>
          <el-col :span="6">
            <p>【学科】：{{ questionItem.subjectName }}</p>
          </el-col>
          <el-col :span="6">
            <p>【目录】：{{ questionItem.directoryName }}</p>
          </el-col>
          <el-col :span="6">
            <p>【方向】：{{ questionItem.direction }}</p>
          </el-col>
        </el-row>
      </div>
      <div class="borderStyle">
        <p>【题干】：</p>
        <p style="color: #0000ff">{{ questionItem.question | html2Text }}</p>
        <p>
          {{ questionItem.questionType | questionType2Filter }}
          选项：（以下选中的选项为正确答案）
        </p>
        <!-- 单选题型 -->
        <div v-if="questionItem.questionType === '1'">
          <el-radio-group v-model="radio">
            <div
              v-for="item in questionItem.options"
              :key="item.id"
              class="radioStyle"
            >
              <el-radio :label="item.code">{{ item.title }}</el-radio>
            </div>
          </el-radio-group>
        </div>
        <!-- 多选题型 -->
        <div v-else>
          <el-checkbox-group v-model="checkList">
            <div
              v-for="item in questionItem.options"
              :key="item.id"
              class="radioStyle"
            >
              <el-checkbox :label="item.code">{{ item.title }}</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
      <div style="border-bottom: 1px solid #606266">
        <div class="videoStyle">
          <p>【参考答案】：</p>
          <el-button
            type="danger"
            size="small"
            class="videoAnswerStyle"
            @click="isShowVideo = true"
            >视频答案预览</el-button
          >
        </div>
        <div class="videoBoxStyle">
          <video
            :src="questionItem.videoURL"
            v-if="isShowVideo"
            width="400"
            height="300"
            controls
          ></video>
        </div>
      </div>
      <div class="borderStyle">
        <p>【答案解析】：{{ questionItem.answer | html2Text }}</p>
      </div>
      <div>
        <p>【题目备注】：{{ questionItem.remarks }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'QuestionsView',
  props: {
    showQuestionsView: {
      type: Boolean
    },
    questionItem: {
      type: Object
    }
  },
  data () {
    return {
      isShowVideo: false // 视频播放结构
    }
  },
  computed: {
    // 单选答案
    radio () {
      if (this.questionItem.options) {
        const newarr = this.questionItem.options.filter(
          (item) => item.isRight === 1
        )
        // console.log(newarr)
        return newarr[0]?.code
      }
      return null
    },
    // 多选答案
    checkList () {
      if (this.questionItem.options) {
        const newarr = this.questionItem.options.filter(
          (item) => item.isRight === 1
        )
        const narr = newarr.map((item) => item.code)
        // console.log(narr)
        return narr
      }
      return null
    }
  },
  methods: {
    closeFn () {
      this.$emit('update:showQuestionsView', false)
      this.isShowVideo = false
    }
  }
}
</script>

<style scoped lang="less">
.borderStyle {
  border-bottom: 1px solid #606266;
}
.videoStyle {
  display: flex;
  align-items: center;
  .el-button {
    padding: 9px 15px;
  }
}
.radioStyle {
  padding: 8px 0px;
}
.videoAnswerStyle {
  height: 32px;
}
// .videoBoxStyle {
// }
</style>
